<template>
  <el-pagination
    :page-sizes="pageSizes"
    :layout="layout"
    :current-page="currentPage"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup lang="ts">
import type { PropType } from "vue";

const props = defineProps({
  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50, 100];
    }
  },
  layout: {
    type: String,
    default: "->,total, sizes, prev, pager, next, jumper"
  }
});

const emit = defineEmits(["pagination"]);

const currentPage = defineModel<number>("currentPage");

const pageSize = defineModel<number>("pageSize");

function handleSizeChange(val: number) {
  pageSize.value = val;
  emit("pagination", { page: currentPage.value, limit: pageSize.value });
}

function handleCurrentChange(val: number) {
  currentPage.value = val;
  emit("pagination", { page: currentPage.value, limit: pageSize.value });
}
</script>
